<template>
  <SnPopup
    mode="bottom"
    v-bind="$attrs"
    v-model="show"
    :round="16"
    bgColor="#f8f8f8"
    :showCancelButton="false"
    :showConfirmButton="false"
  >
    <view class="payment-modal">
      <view class="modal-header">
        <text class="modal-title">请选择支付方式</text>
        <up-icon name="close" size="20" @click="closeModal"></up-icon>
      </view>

      <scroll-view scroll-y class="payment-list-scroll">
        <view
          v-for="(item, index) in paymentMethods"
          :key="index"
          class="payment-item"
          :class="{
            selected: selectedPaymentMethod?.payment_id === item?.payment_id,
          }"
          @click="selectedHandle(item)"
        >
          <view class="currency-icon">
            <up-icon
              :name="
                paymentMethodIconsMap.get(item?.pay_type) ||
                '/static/payIcon/card.svg'
              "
              size="28"
            ></up-icon>
          </view>
          <view class="payment-item-info">
            <text class="payment-item-name"
              >{{ paymentMethodsMap.get(item?.pay_type) }}
              {{ `(${item?.pay_code})` }}</text
            >
            <text class="payment-item-limit"
              >限额 {{ item.min_price }}-{{ item.max_price }} CNY</text
            >
          </view>

          <up-icon
            v-if="selectedPaymentMethod?.payment_id === item?.payment_id"
            name="checkmark-circle-fill"
            size="20"
            color="var(--green-color)"
          ></up-icon>
        </view>
      </scroll-view>
    </view>
  </SnPopup>
</template>

<script setup>
import { ref, defineExpose, defineProps, defineEmits } from "vue";
import { paymentMethodIconsMap, paymentMethodsMap } from "@/utils/data";
import SnPopup from "@/components/common/snPopup.vue";

const emit = defineEmits(["confirm"]);

// 币种列表
const props = defineProps({
  paymentMethods: {
    type: Array,
    default: () => [],
  },
  selectedPaymentMethod: {
    type: Object,
    default: () => {},
  },
});

const show = ref(false);

const openModal = () => {
  show.value = true;
};

const closeModal = () => {
  show.value = false;
};

// 选择支付方式
const selectedHandle = (item) => {
  closeModal();
  emit("confirm", item);
};

defineExpose({
  openModal,
  closeModal,
});
</script>

<style lang="scss" scoped>
.payment-modal {
  padding: 32rpx;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

    .modal-title {
      font-size: var(--font-size-md);
      font-weight: 500;
    }
  }

  .payment-list-scroll {
    flex: 1;
    overflow-y: auto;

    .payment-item {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 16rpx;
      padding: 16rpx;

      &:last-child {
        border-bottom: none;
      }

      &.selected {
        background-color: #fff7e6;
        margin: 8rpx 0;
      }

      .payment-item-info {
        flex: 1;
        padding-left: 16rpx;

        .payment-item-name {
          display: block;
          font-size: var(--font-size-md);
          margin-bottom: 4rpx;
        }

        .payment-item-limit {
          font-size: var(--font-size-xs);
          color: var(--text-secondary);
        }
      }
    }
  }
}
</style>
